<!--
 * @Author: ljc
 * @Date: 2023-04-20 09:41:57
 * @LastEditors: g05047
 * @LastEditTime: 2023-04-25 18:49:05
 * @Description: 下拉树
-->
<template>
  <div class="tree-main">
    <template v-if="props.layoutTree==='mix'">
      <div style="height: 50%; width: 100%;">
        <div class="tree-header">
          <span class="tree-search">区划</span>
          <el-input v-model="adFilterText"
            placeholder="请输入关键词"
            :prefix-icon="Search"
            clearable />
        </div>
        <div class="tree-content">
          <el-tree ref="adTreeRef"
            v-loading="adLoding"
            class="filter-tree"
            style="height: 100%;"
            node-key="code"
            :data="adDataList"
            highlight-current
            :current-node-key="adCurrentNodeKey"
            :default-expanded-keys="adDefaultExpandedKeys"
            :props="defaultProps"
            :default-expand-all="props.adConfig.defaultExpandAll"
            :filter-node-method="adFilterNode"
            @node-click="handleAdNodeClick" />
        </div>
      </div>
      <div style="height: 50%; width: 100%;">
        <div class="tree-header">
          <span class="tree-search">单位</span>
          <el-input v-model="agFilterText"
            placeholder="请输入关键词"
            :prefix-icon="Search"
            clearable />
        </div>
        <div class="tree-content">
          <el-tree ref="agTreeRef"
            class="filter-tree"
            v-loading="agLoding"
            style="height: 100%;"
            node-key="code"
            :data="agDataList"
            highlight-current
            :default-expanded-keys="agDefaultExpandedKeys"
            :current-node-key="agCurrentNodeKey"
            :props="defaultProps"
            :default-expand-all="props.agConfig.defaultExpandAll"
            :filter-node-method="agFilterNode"
            @node-click="handleNodeClick" />
        </div>
      </div>
    </template>
    <template v-else-if="props.layoutTree==='ad'">
      <div class="tree-header">
        <span class="tree-search">区划</span>
        <el-input v-model="adFilterText"
          placeholder="请输入关键词"
          :prefix-icon="Search"
          clearable />
      </div>
      <div class="tree-content">
        <el-tree ref="adTreeRef"
          class="filter-tree"
          style="height: 100%;"
          v-loading="adLoding"
          node-key="code"
          :data="adDataList"
          highlight-current
          :default-expanded-keys="adDefaultExpandedKeys"
          :current-node-key="adCurrentNodeKey"
          :props="defaultProps"
          :default-expand-all="props.adConfig.defaultExpandAll"
          :filter-node-method="adFilterNode"
          @node-click="handleNodeClick" />
      </div>
    </template>
    <template v-else-if="props.layoutTree==='ag'">
      <div class="tree-header">
        <span class="tree-search">单位</span>
        <el-input v-model="agFilterText"
          placeholder="请输入关键词"
          :prefix-icon="Search"
          clearable />
      </div>
      <div class="tree-content">
        <el-tree ref="agTreeRef"
          class="filter-tree"
          style="height: 100%;"
          v-loading="agLoding"
          node-key="code"
          :data="agDataList"
          highlight-current
          :current-node-key="agCurrentNodeKey"
          :props="defaultProps"
          :default-expanded-keys="agDefaultExpandedKeys"
          :default-expand-all="props.agConfig.defaultExpandAll"
          :filter-node-method="agFilterNode"
          @node-click="handleNodeClick" />
      </div>
    </template>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw, watch } from 'vue'
import { ElTree } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { getSysAdata, getSysAgData } from '@/api/api-tree.js'
import RKAdAgConig from './config/tree-config.js'

const props = defineProps(
  {
    adConfig: { // 单位配置
      type: Object,
      default: {
        currentNodeKey: '',//选中单位
        defaultExpandAll: false, //是否全部展开
      }
    },
    agConfig: {// 区划配置
      type: Object,
      default: {
        code: '', // 单位编码
        currentNodeKey: '',//选中单位
        defaultExpandAll: false, //是否全部展开
      }
    },
    layoutTree: { // mix 上区划下单位 ad 区划树 ag 单位树
      type: String,
      default: ''
    },
  }
)

const emit = defineEmits(['adNodeClick', 'agNodeClick'])
let defaultProps = RKAdAgConig.defaultProps // 通用配置
const adLoding = ref(false)
const agLoding = ref(false)
let adCurrentNodeKey = ref(props.adConfig.currentNodeKey)
let agCurrentNodeKey = ref(props.agConfig.currentNodeKey)
let adDefaultExpandedKeys = reactive([])
let agDefaultExpandedKeys = reactive([])
let adDataList = ref([])
let agDataList = ref([])
let agSelectData = reactive({})
let adSelectData = reactive({})
const adFilterText = ref('')
const agFilterText = ref('')
const adTreeRef = ref()
const agTreeRef = ref()

watch(adFilterText, (val) => {
  adTreeRef.value.filter(val)
})
watch(agFilterText, (val) => {
  agTreeRef.value.filter(val)
})
const adFilterNode = (value, data) => {
  if (!value) return true
  const key = defaultProps.label
  return data[key].includes(value)
}
const agFilterNode = (value, data) => {
  if (!value) return true
  const key = defaultProps.label
  return data[key].includes(value)
}

onMounted(async () => {
  if (props.layoutTree === 'mix') {
    await getAdData()
  } else if (props.layoutTree === 'ad') { // 区划数据
    await getAdData()
  } else if (props.layoutTree === 'ag') { // 单位数据
    const params = {
      code: props.agConfig.code
    }
    await getAgata(params)
  }
  watch(() => props.adConfig.currentNodeKey, (value) => {
    if (!value) {
      handleDefaultChecked()
    }
  }, { deep: true, immediate: true })
  watch(() => props.agConfig.currentNodeKey, (value) => {
    if (!value) {
      handleDefaultChecked()
    }
  }, { deep: true, immediate: true })
})
/**获取区划树接口 */
const getAdData = async () => {
  adLoding.value = true
  const result = await getSysAdata({})
  const { data, code, msg } = result
  if (code === 200) {
    adDataList.value = data
    adLoding.value = false
  } else {
    console.error(msg)
    adLoding.value = false
  }
}
/**获取单位树接口 */
const getAgata = async (params) => {
  agLoding.value = true
  const result = await getSysAgData(params)
  const { data, code, msg } = result
  if (code === 200) {
    agDataList.value = data
    agLoding.value = false
  } else {
    console.error(msg)
    agLoding.value = false
  }
}
/**默认选中 */
const handleDefaultChecked = async (type) => {
  if (type) {
    handleDefaultChecked
  } else {
    let dataArray = []
    if (props.layoutTree === 'mix') {
      dataArray = toRaw(adDataList.value)
      if (dataArray.length) {
        const code = String(dataArray[0].code)
        adCurrentNodeKey.value = code
        adSelectData.value = dataArray[0]
        adDefaultExpandedKeys = [code]
        const params = {
          code: code
        }
        await getAgata(params)
      }
    } else if (props.layoutTree === 'ad') {
      dataArray = toRaw(adDataList.value)
      if (dataArray.length) {
        const code = String(dataArray[0].code)
        adCurrentNodeKey.value = code
        adSelectData.value = dataArray[0]
        adDefaultExpandedKeys = [code]
      }
    } else if (props.layoutTree === 'ag') {
      dataArray = toRaw(agDataList.value)
      if (dataArray.length) {
        const code = String(dataArray[0].code)
        agCurrentNodeKey.value = code
        agSelectData.value = dataArray[0]
        agDefaultExpandedKeys = [code]
      }
    }
  }
}
/**mix模式下区划树选中 */
const handleAdNodeClick = async (data, treeNode, label, event) => {
  adSelectData.value = treeNode?.data
  const params = {
    code: treeNode?.data.code
  }
  emit('adNodeClick', { data, adTreeNode: adSelectData.value, label, event })
  await getAgata(params)
}
/**树形选中 */
const handleNodeClick = (data, treeNode, label, event) => {
  if (props.layoutTree === 'mix') {
    agSelectData.value = treeNode?.data
    emit('agNodeClick', { data, adTreeNode: adSelectData.value, agTreeNode: agSelectData.value, label, event })
  } else if (props.layoutTree === 'ad') {
    adSelectData.value = treeNode?.data
    emit('adNodeClick', { data, adTreeNode: adSelectData.value, label, event })
  } else if (props.layoutTree === 'ag') {
    agSelectData.value = treeNode?.data
    emit('agNodeClick', { data, agTreeNode: agSelectData.value, label, event })
  }
}

</script>

<style lang="scss" scoped>
.tree-main {
  width: 100%;
  height: 100%;
  .tree-header {
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #dce4fb;
    .tree-search {
      font-size: 16px;
      margin-left: 3px;
      text-align: left;
      padding-left: 10px;
      display: inline-block;
      color: #525151;
    }
    .el-input {
      margin-bottom: 5px;
      padding-left: 8%;
      padding-right: 5px;
      padding-top: 5px;
      width: 75%;
    }
  }
  .tree-content {
    height: calc(100% - 50px);
    .filter-tree {
      overflow: auto;
    }
    :deep(.el-tree-node > .el-tree-node__children) {
      overflow: visible;
    }
  }
}
</style>